<template>
    <div class="blog-left">
        <article v-for="(a,index) in pager.records" :key="index">
            <h4><a :href="'/pBlogDetails?catalog='+$store.state.currentCatalogNameData+'&aid='+a.aid" target="_blank">{{a.title}}</a></h4>
            <div class="article-title">
                <div class="article-text">{{a.summary}}</div>
                <div class="article-timer"><span>{{a.catalogName}}&nbsp;</span><i
                        class="el-icon-date"></i><span>{{a.createTime}}</span> <span
                ><i class="el-icon-view"></i> {{a.browseNumber}} </span>
                </div>
            </div>
        </article>

        <div class="article-pager">
            <!--引入elementui的分页组件，前端实现的分页-->
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="pager.total"
                    :page-size="pager.size"
                    @current-change="handleCurrentChange"
                    :pager-count="15"
            >
            </el-pagination>
        </div>
        <br>
    </div>
</template>

<script>
    import request from "@/util/request";
    export default {
        name: "MyBlogListLefter",
        data() {
            return {
                //分页对象
                pager:{
                    //表示当前的分页数据
                    records: [
                    ],
                    total: 485, //总记录数
                    size: 8, //每一页的记录数
                    current: 1, //当前的分页号
                    orders: [],
                    optimizeCountSql: true,
                    searchCount: true,
                    countId: null,
                    maxLimit: null,
                    pages: 61 //总页数
                }
            }
        },
        mounted() {
            //尝试获得路由的传参...很重要，怎么获取呢？
            console.log('当前文章的分类是：'+this.$store.state.currentCatalogNameData);
            this.initArticlesList(1);
        },
        methods:{
            //初始化文章类别
            initArticlesList(currentPage){
                //console.log("store里保存的板块数据是："+this.$store.state.currentCatalogNameData);
                request.get('/blog/article/pager?catalog='+this.$store.state.currentCatalogNameData+'&currentPage='+currentPage).then(resp => {
                    if (resp.data.code === 200) {
                        //console.log(resp.data.data);
                        this.pager = resp.data.data;
                    }
                }).catch(err => {
                    console.log(err);
                })
            },

            handleCurrentChange: function (currentPage) {
                //console.log("当前页号："+currentPage);
                this.initArticlesList(currentPage);
            }
        }
    }
</script>

<style scoped>
    .blog-left {
        width: 98%;
        height: 98%;
        margin: 10px 0px 10px 0px;
        padding: 10px 0px 10px 0px;
        background: #FFF;
    }

    .article-title {
        width: 98%;
        display: flex;
        justify-content: space-around;
        margin: 8px 0 8px 0;
    }

    .article-text {
        width: 65%;
        height: 18px;
        padding-right: 20px;
        text-indent: 2em;
        text-align: left;
        color: #444444;
        font-size: small;
        overflow: hidden;
    }

    article {
        width: 100%;
        border-bottom: 1px dotted #BBB;
    }

    .article-timer {
        width: 35%;
        text-align: right;
        color: #ccc;
        font-size: small;
    }

    .article-pager {
        margin-top: 20px;
        width: 100%;
        text-align: center;
    }

    article h4 {
        margin-left: 20px;
    }

    article h4 a {
        color: #336699;;
        text-decoration: underline;
    }
</style>